<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>响应式布局</title>
	<link rel="stylesheet" type="text/css" href="index.css">
	<link rel="stylesheet" type="text/css" href="media.css">
	<link rel="stylesheet" type="text/css" href="../semantic/css/semantic.min.css">
</head>
<body>
<div id="overall">
	<div class="header">
		<span class="text">响应式布局</span>
		<div class="menu_toggle">
			<i class="list layout icon"></i>
		</div>
		<div class="menu" data-hidden="true">
			<a>按钮一</a>
			<a>按钮二</a>
			<a>按钮三</a>
			<a>按钮四</a>
			<a>按钮五</a>
		</div>
	</div>
	<div class="container_1">
		<div class="p_1">
			<h1>Responsive web design tool</h1>
			<p>Design responsive landing pages and publications, export them as static pages or host them yourself</p>
		</div>
		<div class="btn_1">
			<div class="btn_1_1">Watch Video</div>
			<div class="btn_1_2">Sign up</div>
		</div>
		<div class="img_1">
			<img src="img_1.png">
		</div>
	</div>
	<div class="page_1">
		<div class="p_2">
			<h1>Create stunning landing pages and publications</h1>
			<p>Create responsive pages yourself, without the involvement of a developer. Every page created with FROONT is a static page that's easy to create and loads quickly.</p>
		</div>
		<div class="img_2">
			<div class="img_2_1">
				<a></a>
				<div class="text">
					<h5>STARTUP LANDING PAGE</h5>
					<p>Great for startups and companies who want to launch quickly.</p>
				</div>
			</div>
			<div class="img_2_2">
				<a></a>
				<div class="text">
					<h5>MUSIC PROMO PAGE</h5>
					<p>Great for startups and companies who want to launch quickly.</p>
				</div>
			</div>
			<div class="img_2_3">
				<a></a>
				<div class="text">
					<h5>PUBLICATION</h5>
					<p>Great for startups and companies who want to launch quickly.</p>
				</div>
			</div>
		</div>
	</div>
	<div class="page_2">
		<div class="p_3">
			<h1>Features that make FROONT simply awesome</h1>
			<p>Not sure if FROONT is for you? Check out few of the key features!</p>
		</div>
		<div class="ground">
			<div class="item left">
				<div class="imgHead">
					<img src="imgHead.png"/>
				</div>
				<div class="content">
					<h1>Google and Typekit webfonts</h1>
					<p>Add any webfont from Google or Typekit libraries, or even system fonts.</p>
				</div>
			</div>
			<div class="item right">
				<div class="imgHead">
					<img src="imgHead.png"/>
				</div>
				<div class="content">
					<h1>Google and Typekit webfonts</h1>
					<p>Add any webfont from Google or Typekit libraries, or even system fonts.</p>
				</div>
			</div>
			<div class="item left">
				<div class="imgHead">
					<img src="imgHead.png"/>
				</div>
				<div class="content">
					<h1>Google and Typekit webfonts</h1>
					<p>Add any webfont from Google or Typekit libraries, or even system fonts.</p>
				</div>
			</div>
			<div class="item right">
				<div class="imgHead">
					<img src="imgHead.png"/>
				</div>
				<div class="content">
					<h1>Google and Typekit webfonts</h1>
					<p>Add any webfont from Google or Typekit libraries, or even system fonts.</p>
				</div>
			</div>
			<div class="item left">
				<div class="imgHead">
					<img src="imgHead.png"/>
				</div>
				<div class="content">
					<h1>Google and Typekit webfonts</h1>
					<p>Add any webfont from Google or Typekit libraries, or even system fonts.</p>
				</div>
			</div>
			<div class="item right">
				<div class="imgHead">
					<img src="imgHead.png"/>
				</div>
				<div class="content">
					<h1>Google and Typekit webfonts</h1>
					<p>Add any webfont from Google or Typekit libraries, or even system fonts.</p>
				</div>
			</div>
		</div>
	</div>
	<div class="footer">
		<span>页脚备注</span>
	</div>
</div>
</body>
<script type="text/javascript" src="index.js"></script>
</html>